  <template>
  <div>
    <div class="left">
      <!-- <div class="left-title">通用能力分类</div> -->
      <div class="left-content">
        <div class="left-top">
          <div class="tabs-lb">
            <button class="btn_operation_add" @click="openCpDialog('')">
              <img src="~@/assets/img/grzx/add.png" alt />
              新增分组
            </button>
          </div>
          <el-input class="search-input" v-model="jkflForm.jkflmc" placeholder="请输入检索关键字">
            <el-button @click="getNlfl()" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
        <div class="nl-item" :class="{ 'nl-item-active': jkflbh === '' }" @click="checkRow()">
          <img class="img" src="~@/assets/img/main/qb.png" alt />
          全部
        </div>
        <div
          class="nl-item"
          @click="checkRow(item)"
          :class="{ 'nl-item-active': jkflbh === item.jkflbh }"
          v-for="item in nlflList"
          :key="item.jkflbh"
        >
          <div>
            <el-row>
              <el-col :span="2.5">
                <div class="img"></div>
              </el-col>
              <el-col :span="17">
                <div class="jkflmc" :title="item.jkflmc">{{ item.jkflmc }}</div>
              </el-col>
              <el-col :span="2">
                <el-link type="primary" @click.stop="openCpDialog(item.jkflbh)">
                  <i class="el-icon-edit-outline"></i>
                </el-link>
              </el-col>
              <el-col :span="2">
                <el-link type="primary" @click.stop="handleDelete(item)">
                  <i class="el-icon-delete"></i>
                </el-link>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
    <nlfl-dialog-component ref="nlflDialogComponent" @updateTree="getNlfl"></nlfl-dialog-component>
  </div>
</template>
<script>
import jkglService from '@/api/jkgl'
import nlflDialogComponent from '../dialogs/add-nl-dialog.vue'

export default {
  components: { nlflDialogComponent },
  props: {
    handleJkflbh: Function
  },
  data() {
    return {
      // 能力分类
      nlflList: [],
      //接口分类表单
      jkflForm: {
        cjrymc: '',
        jkflmc: ''
      },
      //点击当前的接口编号
      jkflbh: ''
    }
  },
  mounted() {
    // 获取能力分类
    this.getNlfl()
  },
  methods: {
    /*
     * 获取能力分类
     */
    getNlfl() {
      // const params = {}
      const params = this.jkflForm
      jkglService
        .queryJkfl(params)
        .then(res => {
          this.nlflList = res
        })
        .catch(err => {
          !err.isError &&
            this.$message({ type: 'warning', message: err.message })
        })
    },

    /*
     * 删除能力分类
     */
    deleteNlfl(val) {
      const params = { jkflbh: val.jkflbh }
      jkglService
        .deleteJkfl(params)
        .then(res => {
          this.getNlfl()
          this.$message({ type: 'success', message: `${val.jkflmc}删除成功!` })
        })
        .catch(err => {
          !err.isError &&
            this.$message({ type: 'warning', message: err.message })
        })
    },
    /*
     * 点击能力节点查询表格
     */
    handleClick() {
      //
    },
    /* 点击分类树 */
    checkRow(item) {
      if (!item) {
        this.jkflbh = ''
      } else {
        this.jkflbh = item.jkflbh
      }
      this.handleJkflbh(this.jkflbh)
      // this.changePageNum(1)
    },
    /**打开弹框 */
    openCpDialog(val) {
      //调用子组件中打开弹框方法
      this.$refs.nlflDialogComponent.openDialog(val)
    },
    /** 删除能力 */
    handleDelete(val) {
      this.$confirm(`确定删除${val.jkflmc}接口分类?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.deleteNlfl(val)
        })
        .catch(() => {
          this.$message({ type: 'info', message: '已取消删除' })
        })
    }
  }
}
</script>
<style lang="scss" scoped>
// .container {
//   width: 100%;
//   height: 100%;
//   .left-title {
//     font-size: 24px;
//     font-family: "MicrosoftYaHei";
//     text-align: left;
//     padding: 7px 0px 7px 0px;
//   }
// }

.left {
  width: 350px;
  min-height: 500px;
  // background-color: #ffffff;
  // border: solid 1px #cecece;
  float: left;
  padding-bottom: 30px;
  .left-content {
    background-color: #fff;
    border: solid 1px #cecece;
    border-bottom: none;
    margin-top: 10px;
  }

  .nl-item {
    height: 40px;
    border-bottom: solid 1px #cecece;
    color: #666666;
    line-height: 40px;
    cursor: pointer;
    .el-link {
      float: left;
    }
    .jkflmc {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .img {
      width: 16px;
      height: 16px;
      float: left;
      margin: 12px;
    }
  }

  .nl-item-active {
    background-color: #e6f7ff;
    color: #006cff;
    border-right: 4px solid #007eff;
    box-sizing: border-box;
  }
}

.left-top {
  padding: 0 10px 10px 10px;
}

.tabs-lb {
  border: none;
}
</style>
